<template>
    <view class="coupon-list">
        <view 
            class="coupon-item-con"
            v-for="(coupon, index) in filteredCouponList" 
            :key="coupon.id"
            :class="[(manageStatus ? 'open ' : '') + (statusMap[coupon.status] || '')]"
            @click="handleCricleActionClick(coupon)"
        >
            <view 
                class="circle" 
                :class="{ 'active': circleList && circleList.includes(coupon.id) }"
            >
                <u-icon name="checkmark" size="12" color="#fff"></u-icon>
            </view>
            <view class="coupon-item">
                <!-- 左侧折扣区域 -->
                <view class="coupon-left">
                    <view class="discount-amount">
                        <text class="currency">¥</text>
                        <text class="amount">{{ coupon.amount }}</text>
                    </view>
                    <view class="discount-condition">
                        <text>满{{ coupon.condition }}减</text>
                    </view>
                </view>
                
                <!-- 右侧详情区域 -->
                <view class="coupon-right">
                    <view class="coupon-info">
                        <view class="coupon-type">{{ coupon.type }}</view>
                        <!-- 有效期 -->
                        <view class="validity-period" v-if="coupon.validUntil">
                            <text>有效期至：{{ coupon.validUntil }}</text>
                        </view>
                        <view class="coupon-restriction">{{ coupon.restriction }}</view>
                    </view>
                    <view class="action-btn" @click.stop="handleActionClick(coupon)">
                        {{ getActionText(coupon.status) }}
                        <!-- 已使用状态图标 -->
                        <image v-if="coupon.status === 'used'" :src="IMAGE_URL + '/static/coupon/icon1.png'" class="status-icon" mode="aspectFit"></image>
                        <!-- 已过期状态图标 -->
                        <image v-if="coupon.status === 'expired'" :src="IMAGE_URL + '/static/coupon/icon2.png'" class="status-icon" mode="aspectFit"></image>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 空状态 -->
        <view class="empty-state" v-if="filteredCouponList.length === 0">
            <text class="empty-text">暂无{{ getTypeTitle() }}</text>
        </view>
    </view>
</template>

<script>
import appConfig from '@/config/app.js'

export default {
    name: 'CouponList',
    props: {
        // 优惠券列表
        couponList: {
            type: Array,
            default: () => [
                {
                    id: 1,
                    amount: 15,
                    condition: 99,
                    type: '服务券',
                    restriction: '限家政服务类订单使用',
                    status: 'usering', // available: 立即领取, usable: 去使用, used: 已使用, expired: 已过期, canceluse: 使用中
                    validUntil: '2025-12-31'
                },
                {
                    id: 2,
                    amount: 20,
                    condition: 150,
                    type: '邻工券',
                    restriction: '限邻工服务类订单使用',
                    status: 'usable',
                    validUntil: '2025-12-31'
                },
                {
                    id: 3,
                    amount: 30,
                    condition: 200,
                    type: '店铺券',
                    restriction: '限卡西欧官方旗舰店使用',
                    status: 'used',
                    validUntil: '2025-12-31'
                },
                {
                    id: 4,
                    amount: 10,
                    condition: 50,
                    type: '指定商品券',
                    restriction: '限购买雨伞时使用',
                    status: 'expired',
                    validUntil: '2025-01-01'
                }
            ]
        },
        type: {
            type: Array,
            default: () => ['available','usable','used','expired','canceluse']
        },
        manageStatus: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            IMAGE_URL: appConfig.IMAGE_URL,
            circleList: [],
            manageAllStatus: false,
            statusMap: {
                'available': 'available',
                'usable': 'usable',
                'used': 'used',
                'expired': 'expired',
                'canceluse': 'canceluse'
            }
        }
    },
    computed: {
        // 根据type属性过滤优惠券列表
        filteredCouponList() {
            // 根据type数组过滤优惠券列表
            if (!this.type || !Array.isArray(this.type)) {
                return this.couponList;
            }
            // type为数组，返回status在type中的优惠券
            return this.couponList.filter(coupon => this.type.includes(coupon.status));
        }
    },

    methods: {
        // 获取状态文本
        getStatusText(status) {
            const statusTextMap = {
                'used': '已使用',
                'expired': '已过期'
            }
            return statusTextMap[status] || ''
        },
        
        // 获取操作按钮文本
        getActionText(status) {
            const actionTextMap = {
                'available': '立即领取',
                'usable': '去使用',
                'used': '已使用',
                'expired': '已过期',
                'canceluse': '取消使用'
            }
            return actionTextMap[status] || '去使用'
        },
        
        // 获取类型标题
        getTypeTitle() {
            const typeMap = {
                'available': '可领取优惠券',
                'usable': '可使用优惠券',
                'used': '已使用优惠券',
                'expired': '已过期优惠券'
            }
            return typeMap[this.type] || '优惠券';
        },
        
        // 处理操作按钮点击
        handleActionClick(coupon) {
            if (this.manageStatus) return;
            switch (coupon.status) {
                case 'available':
                    this.$emit('claimCoupon', coupon)
                    break
                case 'usable':
                    this.$emit('useCoupon', coupon)
                    break
                case 'canceluse':
                    this.$emit('cancelUseCoupon', coupon)
                    break
                case 'used':
                case 'expired':
                    // 已使用或已过期的优惠券不触发任何操作
                    break
                default:
                    this.$emit('useCoupon', coupon)
            }
        },

        // 是否选中
        handleCricleActionClick(coupon) {
            if (!this.manageStatus) return;
            
            // 单选逻辑：如果当前优惠券已经被选中，则取消选中
            if (this.circleList.includes(coupon.id)) {
                this.circleList = this.circleList.filter(id => id !== coupon.id);
                // 触发取消选择事件
                this.$emit('cancelSelectCoupon', coupon);
            } else {
                // 单选逻辑：先清空之前的选择，再选择当前优惠券
                this.circleList.push(coupon.id);
                // 触发选择事件
                this.$emit('selectCoupon', coupon);
            }
        },

        // 是否全选
        isAllCricleActionEvent() {
            this.circleList = this.manageAllStatus ? this.couponList.map(c => c.id) : []
        },
        
        // 设置选中的优惠券（外部调用）
        setSelectedCoupon(couponId) {
            if (couponId) {
                this.circleList = [couponId];
            } else {
                this.circleList = [];
            }
        },
        
        // 获取当前选中的优惠券ID
        getSelectedCouponId() {
            return this.circleList.length > 0 ? this.circleList[0] : null;
        }
    }
}
</script>

<style lang="scss" scoped>

.coupon-list {
    padding: 0 32rpx;
    overflow: hidden;
}

.coupon-header {
    margin-bottom: 20rpx;
    padding-bottom: 10rpx;
    border-bottom: 1rpx solid #EEEEEE;
}

.coupon-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
}

.coupon-item-con {
    position: relative;
    margin-bottom: 28rpx;

    &.open {
        .coupon-item {
            margin-left: 65rpx;
        }
        .circle {
            display: flex;
        }
    }
}

.coupon-item {
    display: flex;
    overflow: hidden;
    width: 686rpx;
    height: 160rpx;
    margin-left: 0;
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.1);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    transition: all 0.3s;
    
    &:last-child {
        margin-bottom: 0;
    }
}

.circle {
    display: none;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 34rpx;
    height: 34rpx;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 2rpx solid #0785cf;
    background-color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;

    &:active {
        transform: translateY(-50%) scale(0.95);
    }

    &.active {
        background-color: #0785cf;
        border-color: #0785cf;
        box-shadow: 0 2rpx 8rpx rgba(7, 133, 207, 0.3);
    }
}

// 左侧折扣区域
.coupon-left {
    width: 208rpx;
    height: 160rpx;
    background: linear-gradient( 146deg, #FFF0CD 0%, #FDE4B8 100%);
    border-radius: 20rpx 0rpx 0rpx 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.discount-amount {
    display: flex;
    align-items: baseline;
    margin-bottom: 8rpx;
    
    .currency {
        font-size: 48rpx;
        color: #EE241D;
        font-weight: 600;
        margin-right: 4rpx;
    }
    
    .amount {
        font-size: 64rpx;
        color: #EE241D;
        font-weight: 600;
        line-height: 1;
    }
}

.discount-condition {
    font-size: 24rpx;
    color: #333333;
    font-weight: 400;
}

// 右侧详情区域
.coupon-right {
    flex: 1;
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 28rpx 24rpx 20rpx;
}

.coupon-info {
    flex: 1;
    margin-right: 20rpx;
}

.coupon-type {
    font-size: 28rpx;
    color: #333333;
    font-weight: 600;
}

.coupon-restriction {
    font-size: 22rpx;
    color: #999999;
}

.action-btn {
    width: 142rpx;
    height: 48rpx;
    background: linear-gradient( 270deg, #FFF0CD 0%, #FDE4B8 100%);
    box-shadow: inset 0rpx 0rpx 8rpx 0rpx rgba(233,222,204,0.2), 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.06);
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    font-size: 24rpx;
    color: #EE241D;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.status-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}



// 状态标签
.status-tag {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    background: rgba(0, 0, 0, 0.6);
    color: #FFFFFF;
    font-size: 20rpx;
    padding: 8rpx 16rpx;
    border-radius: 4rpx;
    white-space: nowrap;
}

// 有效期
.validity-period {
    
    text {
        font-size: 20rpx;
        color: #999999;
    }
}

// 使用中状态
// .coupon-item.canceluse {
//     .coupon-left {
//         background: linear-gradient( 146deg, #FF6B35 0%, #FF8C42 100%);
        
//         .discount-amount {
//             .currency,
//             .amount {
//                 color: #FFFFFF;
//             }
//         }
        
//         .discount-condition {
//             color: #FFFFFF;
//         }
//     }
    
//     .action-btn {
//         background: linear-gradient( 270deg, #FF6B35 0%, #FF8C42 100%);
//         color: #FFFFFF;
//         box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(255,107,53,0.3);
//     }
// }

// 已使用状态
.coupon-item.used {
    pointer-events: none;
    
    .action-btn {
        width: 100rpx;
        height: 100rpx;
        font-size: 0;
        position: relative;
    }
}

// 已过期状态
.coupon-item.expired {
    pointer-events: none;
    
    .coupon-left {
        background: #FFFFFF;

        .discount-amount {
            .currency,
            .amount {
                color: #666666;
            }
        }

        .discount-condition {
            color: #999999;
        }
    }

    .coupon-right {
        background: #EEEEEE;

        .coupon-type {
            color: #666666;
        }

        .validity-period,
        .coupon-restriction {
            color: #999999;
        }
    }
    
    .action-btn {
        width: 100rpx;
        height: 100rpx;
        font-size: 0;
        position: relative;
    }
}

.empty-state {
    text-align: center;
    padding: 40rpx 0;
    color: #999999;
    font-size: 28rpx;
}
</style>